<template>
	<view style="text-align: center;">
		<view style="margin-top: 100px;">
			<image :src="iconFilePath" @click="updateImage()" mode="aspectFill" class="img">
				
			</image>
		</view>
		<view class="btn-group">
		      <button @click="updateImage()">选择图片显示</button>
		      <button @click="previewImage()">预览图片</button>
		      <button @click="getImageInfo()">获取图片信息</button>
		    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilePath:"/static/city1.png"
			}
		},
		methods: {
			updateImage(){
				uni.chooseImage({
					count:1,
					sourceType: ['ablum'],
					success: (res) =>{
						this.iconFilePath=res.tempFilePaths[0];
					}
				});
			},
			 previewImage() {
			      uni.previewImage({
			        current: this.iconFilePath, // 当前显示的图片
			        urls: [this.iconFilePath] // 需要预览的图片数组
			      });
			    },
				getImageInfo() {
				      uni.getImageInfo({
				        src: this.iconFilePath,
				        success: (info) => {
				          uni.showModal({
				            title: "图片信息",
				            content: `宽度：${info.width}px\n高度：${info.height}px\n格式：${info.type}`
				          });
				        }
				      });
				    }
		}
	}
</script>

<style>
.img{
	width: 200rpx;
	height: 200rpx;
	border-radius: 100rpx;
}
</style>
